﻿<!DOCTYPE html>
<html>
<head>
    <title>HTML5播放器Demo</title>
    <meta http-equiv="charset" content="utf-8">
    <link rel="Stylesheet" type="text/css" href="http://resource.en100.com.cn/javascript/mediabyshf/v1.1.1/Theme/Default/MediaPlayerBySHF.min.css" />
</head>
<body>
<div id="mediaContainer" style="visibility:visible;"></div>
<!--播放器结构-->
<div class="MediaBySHFContainer" style="display:none;">
    <!--播放器组件(Silverlight Or Html5(audio,video))容器-->
    <div class="MediaPlayerContainer"></div>

    <!--播放器控制部分-->
    <div class="MediaControllerContainer">
        <input type="button" class="btnControl btnControlPlay" />
        <input type="button" class="btnControl btnControlStop" />
        <!--进度条部分-->
        <div class="ProcessBarContainer">
            <div class="ProcessBarCommon ProcessBarLeft"></div>
            <div class="ProcessBar">
                <div class="ProcessSlider"></div>
            </div>
            <div class="ProcessBarCommon ProcessBarRight"></div>
        </div>
        <!--音量控制部分-->
        <div class="VolumeControlContainer">
            <input type="button" class="btnControl btnControlVolume" />
            <div class="VolumeBar"><div class="VolumeSlider"></div></div>
        </div>
        <!--状态栏-->
        <span class="MediaStatus"></span>
    </div>
    <!--播放器控制部分-->
</div>
<input type="button" id="btnTestRemoveEvent" value="移除播放完成事件" />
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../DragBySHF/DragBySHF.js"></script>
<script type="text/javascript" src="MediaPlayerBySHF.js"></script>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src=""></script>
<!--<script type="text/javascript" src="http://resource.en100.com.cn/javascript/DragBySHF/V1.1.1/DragBySHF.js"></script>
<script type="text/javascript" src="http://resource.en100.com.cn/javascript/mediabyshf/v1.1.1/MediaPlayerBySHF.min.js"></script>
<script type="text/javascript" src="http://resource.en100.com.cn/javascript/mediabyshf/v1.1.1/Silverlight.min.js"></script>-->
<script type="text/javascript">
    var objMedia1;
    $(function () {
        objMedia1 = $.MediaBySHF.Create({isShowControls:true});
        objMedia1.Ready(function () { Ready(); })
        function Ready() {
            objMedia1.SetAutoPlay(false);
            objMedia1.SetMedia("http://192.168.1.66/MediaBySHF/Web/BothEN1.mp3");
            objMedia1.AddEvent(objMedia1.EventHandler.Canplaythrough, "EndEvent", "{\"Test\":\"完成\"}");
        }
        $("#btnTestRemoveEvent").click(function () {
            objMedia1.RemoveEvent(objMedia1.EventHandler.Ended, "EndEvent", "{\"Test\":\"完成\"}");
        })
    })
    function EndEvent(strParams) {
        strParams = $.parseJSON(strParams);
        alert(strParams.Test);
        $(".btnControlPause").removeClass("btnControlPause").addClass("btnControlPlay");
    }
</script>
</body>
</html>
